<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-26 14:44
 * Desc: 点击头像弹窗 AvatarPop
 */
-->
<template>
  <view class="avatar-pop">
    <zm-popup
      v-model="currentValue"
      mode="bottom"
      :closeable="false"
      :mask-close-able="false"
    >
      <view class="avatar-pop__content">
        <view class="avatar-pop__items">
          <view class="avatar-pop__item" @click="onChooseImg">选择图片</view>
          <view class="avatar-pop__item" @click="onCheckImg">查看头像</view>
        </view>
        <view style="height: 15upx; background: #f3f5f7"></view>
        <view class="avatar-pop__item black" @click="onClose">取消</view>
      </view>
    </zm-popup>
  </view>
</template>
<script>
  import ZmPopup from '@/commons/ZmPopup'
  // import { previewImage } from '@/utils/tools'
  import * as auth from '@/utils/auth'
  import dayjs from 'dayjs'
  import config from '@/config'
  import signUtil from '@/utils/fetch/signUtil.js'
  export default {
    name: 'AvatarPop',
    components: { ZmPopup },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },

    data() {
      return {}
    },
    methods: {
      onChooseImg() {
        //

        const chooseData = {
          sizeType: ['compressed'],
          count: 1,
          success: (res) => {
            const tempFilePaths = res.tempFilePaths //图片临时数组
            console.log(tempFilePaths)
            const obj = {}
            obj.account = auth.getLocAccount() || config.account || ''
            obj.tokenId = auth.getLocToken() || ''
            obj.deviceType = auth.platform() === 'mp-weixin' ? 'wxxcx' : 'h5'
            obj.requestTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
            const password = auth.getPwd() || config.password
            const verifyInfo = signUtil.getSign(obj, password)

            uni.getFileInfo({
              filePath: tempFilePaths[0],
              success: (data) => {
                console.log('tempFilePaths', data)
              },
              fail: (err) => {
                console.log('tempFilePaths err', err)
              }
            })
            uni.uploadFile({
              //请求的url接口地址
              url: `${config.host}/api/up/upImg`,
              formData: { ...obj, verifyInfo },
              fileType: 'image', //图片类型
              filePath: tempFilePaths[0], //哪张图片
              name: 'image', //对应接口的文件名称
              // #ifdef MP-WEIXIN || MP-TOUTIAO
              header: {
                //请求头
                'Content-Type': 'multipart/form-data'
              },
              // #endif
              success: (res) => {
                console.log('success', res)
                //成功的回调
                //一般用于重新获取数据渲染页面
                this.$emit('setMemberData', {
                  headImg: JSON.parse(res.data).data.url
                })
              },
              fail: (err) => {
                //失败的回调
                console.log('err:', err)
              }
            })
          },
          fail: (err) => {
            console.log('err', err)
          }
        }
        //#ifdef MP-TOUTIAO
        tt.chooseImage(chooseData)
        //#endif
        //#ifndef MP-TOUTIAO
        uni.chooseImage(chooseData)
        //#endif
      },

      onCheckImg() {
        this.$tools.previewImage(0, [this.obj.headImg])
      },
      onClose() {
        this.$emit('input', false)
      },
      // url 转 base64
      urlTobase64(url) {
        return new Promise((resolve, reject) => {
          uni.request({
            url: url,
            method: 'GET',
            responseType: 'arraybuffer',
            fail: (error) => {
              reject(error)
            },
            success: async (res) => {
              let base64 = uni.arrayBufferToBase64(res.data)
              base64 = 'data:image/jpeg;base64,' + base64
              resolve(base64)
            }
          })
        })
      }
    },
    computed: {
      currentValue: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .avatar-pop {
    &__item {
      padding: 25upx 0;
      font-size: 32upx;
      text-align: center;
      color: $blue;
    }
  }
</style>
